<template>
  <view class="picture" :style="[wrapStyle]" @tap="onClick">
    <u-image
      :bg-color="bgColor"
      :loading-icon="img"
      :error-icon="img"
      :width="width"
      :height="height"
      :shape="shape"
      :borderRadius="borderRadius"
      :src="src"
      :mode="mode"
    >
      <image class="picture__loading" :src="img" slot="loading"></image>
      <image class="picture__error" :src="img" slot="error"></image>
    </u-image>
  </view>
</template>

<script>
import uImage from '@/uview-ui/components/u-image/u-image.vue'
export default {
  components: {
    uImage,
  },
  props: {
    // 图片地址
    src: {
      type: String,
      default: '',
    },
    // 宽度，单位任意
    width: {
      type: [String, Number],
      default: '100%',
    },
    // 高度，单位任意
    height: {
      type: [String, Number],
      default: 'auto',
    },
    // 图片形状，circle-圆形，square-方形
    shape: {
      type: String,
      default: 'square',
    },
    // 圆角，单位任意
    borderRadius: {
      type: [String, Number],
      default: 0,
    },
    mode: {
      type: String,
      default: 'aspectFill',
    },
    bgColor: {
      type: String,
      default: '#f1f1f1',
    },
  },
  options: { styleIsolation: 'shared' },
  data() {
    return {
      img: require('@/static/images/placeholder_logo.png'),
    }
  },
  computed: {
    wrapStyle() {
      let style = {}
      style.width = this.$u.addUnit(this.width)
      style.height = this.$u.addUnit(this.height)
      style.borderRadius = this.$u.addUnit(this.borderRadius)
      return style
    },
  },
  methods: {
    // 点击图片
    onClick() {
      this.$emit('click')
    },
  },
}
</script>

<style lang="scss" scoped>
.picture {
  position: relative;
  overflow: hidden;
  ::v-deep .u-image {
    position: absolute;
    left: 0;
    top: 0;
  }
  .picture__error,
  .picture__loading {
    width: 76rpx;
    height: 54rpx;
  }
}
</style>
